import React, { Component } from 'react';
import style from './ranklist.module.css';
import { Tabs } from 'antd-mobile';
// import img from "./images/icon1.jpg"
import axios from 'axios';
import { connect } from "react-redux"
class Ranklist extends Component {
    state = {
        dizhi: '',
        selectnumberlist:[],
        selecthotlist:[],
        selectcountslist:[]
    }
    componentDidMount() {
        let dizhi = this.props.dizhi
        console.log(dizhi)
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url: "/shop/selectnumber",
            method: "post",
            header: headerJSON,
            data: {
                places: dizhi.name
            }
        }).then(res=>{
            console.log(res)
            this.setState({
                selectnumberlist:res.data.lists,
                time:new Date().getTime()
            })
        })
        axios({
            url: "/shop/selecthot",
            method: "post",
            header: headerJSON,
            data: {
                places: dizhi.name
            }
        }).then(res=>{
            console.log(res)
            this.setState({
                selecthotlist:res.data.lists,
                time:new Date().getTime()
            })
        })
        axios({
            url: "/shop/selectcounts",
            method: "post",
            header: headerJSON,
            data: {
                places: dizhi.name
            }
        }).then(res=>{
            console.log(res)
            this.setState({
                selectcountslist:res.data.lists,
                time:new Date().getTime()
            })
        })
        this.setState({ 
            dizhi:this.props.dizhi
        })
    }
    render() {
        let tabs=[
            { title: this.props.dizhi.name + '热销榜' },
            { title: this.props.dizhi.name + '热搜榜' },
            { title: this.props.dizhi.name + '超值榜' },
        ]
        return (
            <div>
                <div className={style.box}>
                    <Tabs key={this.props.dizhi} tabs={tabs} initialPage={0} animated={false} useOnPan={false} swipeable={false}>
                    <div className={style.tab}>
                        { this.state.selectnumberlist.map(item=>
                        <div className={style.rank} key={item.id}>
                            <div className={style.photo}>
                            <img src={item.imgs} />
                            </div>
                            <p>30天内{item.numbers}套</p>
                            <p>{item.name}</p>
                            <p>建面{item.areaHigh}~{item.areaLow}㎡</p>
                            <p>{item.priceLow}元/㎡</p>
                        </div>
                        )}
                    </div>
                    <div className={style.tab}>
                        { this.state.selecthotlist.map(item=>
                        <div className={style.rank} key={item.id}>
                            <div className={style.photo}>
                            <img src={item.imgs} />
                            </div>
                            <p>30天内{item.numbers}套</p>
                            <p>{item.name}</p>
                            <p>建面{item.areaHigh}~{item.areaLow}㎡</p>
                            <p>{item.priceLow}元/㎡</p>
                        </div>
                        )}
                    </div>
                    <div className={style.tab}>
                        { this.state.selectcountslist.map(item=>
                        <div className={style.rank} key={item.id}>
                            <div className={style.photo}>
                            <img src={item.imgs} />
                            </div>
                            <p>30天内{item.numbers}套</p>
                            <p>{item.name}</p>
                            <p>建面{item.areaHigh}~{item.areaLow}㎡</p>
                            <p>{item.priceLow}元/㎡</p>
                        </div>
                        )}
                    </div>
                    </Tabs>
                </div>
            </div>
        );
    }
}

export default connect(
    state => ({
        dizhi: state.citylist
    }),
)(Ranklist)